<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        body{background-color: #edecf1;}
        header{background-image: url("../img/user_bg.png");background-size: cover;background-position: center;padding-bottom: 20px;}
        header .h-title{position: relative;line-height: 45px;overflow: hidden;}
        header .h-title a{float: left;width: 50px;text-align: center;font-size: 14px;display: block;}
        header .h-title a i{font-size: 22px;color: #fff;}
        header .h-title-center{position: absolute;left: 50px;top: 0;right: 50px;height: 45px;text-align: center;font-size: 18px;}
        header .h-title .vip-name{color: #e60014;}
        header .h-title .sex{color: #049cce;}
        header .face{width: 60px;height: 60px;border-radius: 100%;margin: 20px auto;display: block;border: 2px solid #fff;}
        header .fans{text-align: center;color: #fff;font-size: 12px;}
        header .fans span{display: inline-block;margin: 0 2px;}
        header .des{color: #333;text-align: center;font-size: 14px;margin-top: 10px;}
        .switch{background-color: #fff;padding: 5px;overflow: hidden;}
        .switch div{box-sizing: border-box;float: left;width: 50%;line-height: 40px;text-align: center;font-size: 14px;}
        .switch div:first-child{border-right: 1px solid #e0dbd7;}
        .b-border{background-color: #fff;}
        .b-border div{width: 50%;height: 3px;background-color: #ffc10c;}
        .content1{}
        .content1 ul li{margin-top: 5px;background-color: #fff;padding: 12px;}
        .content1 ul li .c1-title{overflow: hidden;}
        .content1 ul li .c1-title .c1-name{float: left;color: #333;}
        .content1 ul li .c1-title .c1-price{float: right;color: #ffc10c;}
        .content1 ul li .c1-des{margin-top: 8px;color: #666;}
        .content1 ul li .c1-bot{font-size: 12px;margin-top: 15px;color: #999;}
        .content1 ul li .c1-bot i{margin-right: 5px;}

        .content2{display: none;}
        .content2 ul li{padding: 8px 10px;position: relative;display: -webkit-box;display: box;background-color: #fff;margin-top: 5px;}
        .content2 .left{width: 50px;height: 50px;background-size: cover;background-position: center;}
        .content2 .right{margin-left: 10px;-webkit-box-flex: 1;box-flex: 1;color: #333;}
        .content2 .right .top{font-size: 15px;margin-top: 5px;}
        .content2 .right .bottom{overflow: hidden;font-size: 13px;margin-top: 8px;}
        .content2 .right .bottom .b-left{float: left;}
        .content2 .right .bottom .b-left .evaluate{color: #ffc10c;margin-right: 5px;}
        .content2 .right .bottom .b-right{float: right;}

        .footer{height: 50px;}
        .footer-fixed{position: fixed;z-index: 999;left: 0;bottom: 0;width: 100%;height: 50px;
            display: -webkit-box;display: box;background-color: #fff;}
        .footer-fixed div i{font-size: 20px;}
        .footer-fixed div p{font-size: 12px;}
        .footer-fixed div span{font-size: 18px;}
        .footer-fixed .collect{width: 50px;text-align: center;line-height: 20px;padding-top: 5px;color: #888;position: relative;}
        .footer-fixed .collect:after{content: '';position: absolute;left: auto;bottom: auto;right: 0;top: 0;height: 100%;width: 1px;background-color: #dcdcdc;
            display: block;z-index: 15;-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;transform: scale(.5,1);-webkit-transform: scale(.5,1);}
        .footer-fixed .contact{width: 50px;text-align: center;line-height: 20px;padding-top: 5px;}
        .footer-fixed .contact a{display: block;color: #888;}
        .footer-fixed .talk{background-color: #ffc10c;text-align: center;color: #fff;line-height: 50px;box-flex: 1;-webkit-box-flex: 1;}
        .footer-fixed .reserve{display: block;background-color: #e70014;text-align: center;color: #fff;line-height: 50px;box-flex: 1;-webkit-box-flex: 1;}
    </style>
</head>
<body>
    <header>
        <div class="h-title">
            <a href="javascript: window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
            <div class="h-title-center">
                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                <span class="sex"><i class="iconfont icon-women"></i></span>
            </div>
        </div>
        <img class="face" src="../img/pic_lessor.png" alt=""/>
        <div class="fans">
            <span>粉丝：23</span>|<span>关注：56</span>
        </div>
        <p class="des">我是一个全能健将，请叫我super man！</p>
    </header>
<div class="switch">
    <div class="switch-item">他的技能（3）</div>
    <div class="switch-item">用户评价（0）</div>
</div>
<div class="b-border">
    <div></div>
</div>
<div class="content">
    <div class="contents content1">
        <ul>
            <li>
                <div class="c1-title">
                    <span class="c1-name">生活服务</span>
                    <span class="c1-price">200元/小时</span>
                </div>
                <p class="c1-des">常规足浴、保健油压、全身按摩</p>
                <p class="c1-bot"><i class="iconfont icon-1"></i>23人购买</p>
            </li>
            <li>
                <div class="c1-title">
                    <span class="c1-name">生活服务</span>
                    <span class="c1-price">200元/小时</span>
                </div>
                <p class="c1-des">常规足浴、保健油压、全身按摩</p>
                <p class="c1-bot"><i class="iconfont icon-1"></i>23人购买</p>
            </li>
        </ul>
    </div>
    <div class="contents content2">
        <ul>
            <li>
                <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                <div class="right">
                    <div class="top">任务名称</div>
                    <div class="bottom">
                        <div class="b-left"><span class="evaluate">已好评</span>服务相当好！</div>
                        <div class="b-right">2016-05-15</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="left" style="background-image: url('../img/pic_lessor.png')"></div>
                <div class="right">
                    <div class="top">任务名称</div>
                    <div class="bottom">
                        <div class="b-left"><span class="evaluate">已好评</span>服务相当好！</div>
                        <div class="b-right">2016-05-15</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

    <footer class="footer">
        <div class="footer-fixed top-line">
            <div class="collect">
                <i class="iconfont icon-star4"></i>
                <p>收藏</p>
            </div>
            <div class="contact">
                <a href="tel:123456">
                    <i class="iconfont icon-shouji"></i>
                    <p>联系</p>
                </a>
            </div>
            <a href="../html/booking_service.html" class="reserve">
                <i class="iconfont icon-yuyue"></i>
                <span>预约</span>
            </a>
        </div>
    </footer>
</body>
<script>
    $('.switch-item').click(function(){
        var _index = $(this).index();
        var _left = _index*50+'%';
        $('.b-border div').animate({marginLeft:_left});
        $('.contents').eq(_index).fadeIn().siblings().hide();
    })
</script>
</html>